<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>图表(库存缺货率)</title>   
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<!-- 引用常用的js插件的jsp页面 -->
	<jsp:include page="../../common.jsp"></jsp:include>
	
	<script type="text/javascript">
	$(function(){
		 var startDate= new Date().Format("yyyy-MM-dd");
		 var endDate =new Date().Format("yyyy-MM-dd");					 		 
		 //jQuery的赋值和取值
		 $("#startDate").val(startDate);
		 //console.log("jQuery="+$("#startDate").val());
		 
		 // easyui的赋值和取值
		 // 设置日期输入框的值
		 $("#startDate").datebox("setValue",manageDate(startDate,-8,"D"));
		 $("#endDate").datebox("setValue",manageDate(endDate,+8,"D"));	  
		 // 获取日期输入框的值	
	     var v = $("#startDate").datebox("getValue");	
		 //console.log("easyui="+v);
		  	
		 
		 charts();	 
	 
	});
		
	//图表
    function charts(){
		
	    // 基于准备好的dom，初始化echarts实例   
	    var myChart = echarts.init(document.getElementById('main'));  
	    //用户等待加载...
	    myChart.showLoading(  
		       {text: 'Loding...'  }  
		 );
		
		//查询条件
		//var startDate=$("#startDate").val();
		//var endDate=$("#endDate").val();
		var startDate="2016-11-01";
		var endDate="2016-11-10";
		var categoryOne=$("#categoryOne").combobox("getValue");
		var categoryTwo=$("#categoryTwo").combobox("getValue");
		var categoryThree=$("#categoryThree").combobox("getValue");
		var productBrand=$("#productBrand").combobox("getValue");
	//	console.log(categoryOne+"="+categoryTwo+"="+categoryThree)
	
		//向隐藏域赋值 (以免选择条件后未查询，引起的数据不一致)
	    $("#oneHidden").val(categoryOne);
	    $("#twoHidden").val(categoryTwo);
	    $("#threeHidden").val(categoryThree);	    
	    $("#brandHidden").val(productBrand);
	    
	    
	    
	//缺货率数据
	var stockoutInfo=[];		
    //异步获取数据,X轴日期信息
    $.post("stockCharts/selStockoutInfo.json",{"startDate":startDate,"endDate":endDate,
    	                                       "categoryOne":categoryOne,"categoryTwo":categoryTwo,
    	                                       "categoryThree":categoryThree,"productBrand":productBrand},   
       function(e){  	
   	      //遍历仓库名，得到仓库缺货率的值
    	  $.each(e.warehousName,function(index,element){
    		 var dataInfo={};	              
			  dataInfo={"name":element,"type":"line","data":e[element]};					  
			  stockoutInfo.push(dataInfo)
		  });     	      
	    	  // 指定图表的配置项和数据
	    	  var option = {
	  			    title: {
	  			        text: '库存缺货率'
	  			    },
	  			    tooltip: {
	  			        trigger: 'axis'
	  			    },
	  			    legend: {
	  			        data:e.warehousName
	  			    },
	  			    grid: {
	  			        left: '3%',
	  			        right: '4%',
	  			        bottom: '3%',
	  			        containLabel: true
	  			    },
	  			    toolbox: {
	  			        feature: {
	  			            saveAsImage: {}
	  			        }
	  			    },
	  			    xAxis: {
	  			        type: 'category',
	  			        boundaryGap: false,
	  			        data: e.dateInfo
	  			    },
	  			    yAxis: {
	  			        type: 'value',
	  			        boundaryGap: false,
	  			        data:['1','2']
	  			    },
	  			    series: stockoutInfo
	  			};          		                       
		     
		      //用户等待加载结束...
		      myChart.hideLoading();
		     // 使用刚指定的配置项和数据显示图表。
		      myChart.setOption(option);
		     
		      //查询缺货明细
		      myChart.on('click', function (param) {
				    //detailedPopup(param.)
				    console.log(param.name,param.seriesName)
				    //查询缺货明细
				    detailedPopup(param.name,param.seriesName)
				});
		     
         });                        				 
    }
	
    //查询缺货明细(日期，仓库)
	function detailedPopup(currentDate,warehouseName){
    	//从隐藏域中获取数据
		var categoryOne=$("#oneHidden").val();
		var categoryTwo=$("#twoHidden").val();
		var categoryThree=$("#threeHidden").val();
		var productBrand=$("#brandHidden").val();
		
		//jquery-ajax 同步取商品总数
		var stockProductNumber=0;			
			$.ajax({
				url:"stockCharts/selStouckoutTotalNumber.json",
				type:"POST",//GET
				async:false, //或false,是否异步
				data:{      //参数
					  currentDate:currentDate,
				      warehouseName:warehouseName,
				      categoryOne:categoryOne,
				      categoryTwo:categoryTwo,
				      categoryThree:categoryThree,
				      productBrand:productBrand,
				},
				timeout:5000,    //超时时间
			    dataType:'text', //返回的数据格式：json/xml/html/script/jsonp/text
			    beforeSend:function(xhr){
			        console.log(xhr)
			        console.log('发送前')
			    },	
			    
			    success:function(data,textStatus,jqXHR){
			    	stockProductNumber=data;
			    	console.log('成功')
			    },
			    error:function(xhr,textStatus){
			        console.log('错误')
			        console.log(xhr)
			        console.log(textStatus)
			    },
			    complete:function(){
			        console.log('结束')
			    }
			});
		
		
    	//弹窗
		  $("#stockoutDetailed").show()
		   $("#stockoutDetailed").dialog({            
			     title : "缺货商品-"+currentDate+"/"+warehouseName+"/总商品数:"+stockProductNumber,
			     width: 350,
                 height:450,
                 resizable:true,//尺寸可调整
                 modal:true//遮罩层
            });
    	//数据表格
		grid= $('#stockoutDetailedDg').datagrid({
		    url:'stockCharts/selStockoutDetailed.json',
		    pagination:true,
		    pageSize:50,
		    pageList: [ 10, 15, 25, 50,100,200],
		    rownumbers : true,   		    
		    //额外的参数
		    queryParams:{
		      currentDate:currentDate,
		      warehouseName:warehouseName,
		      categoryOne:categoryOne,
		      categoryTwo:categoryTwo,
		      categoryThree:categoryThree,
		      productBrand:productBrand,
		    },   	          	    
		    columns : [ [ 					
		    	{field:'productId', title:'商品ID',width:100},
				{field:'productName', title:'商品名',width:200},	    
             ]]	    	    
		  });
		
	}
    
    //查询
    function query(){  	
    	var startDate=$("#startDate").combobox("getValue");
		var endDate=$("#endDate").combobox("getValue");
		if(queryData(startDate,endDate) != false){
			charts() 
		}			  	
    }
   </script>
	
  </head>  
   <body>
     <div style="width:1396px;border:1px solid red;">                  <!-- 不可编辑属性 -->
	                开始时间:<input type="text" class= "easyui-datebox" data-options="editable:false" id="startDate" name="startDate" value="" />        
	                结束时间:<input type="text" class= "easyui-datebox" data-options="editable:false" id="endDate" name="endDate"  value=""/>
	                品牌:<input id="productBrand" class="easyui-combobox" data-options="valueField:'id',textField:'text',url:'stockCharts/selProductBrand.json'" />  
	              
	        <!-- essyui的三级联动 -->        
	                一级类别:<input id="categoryOne" class="easyui-combobox" data-options="    
	                             missingMessage:'请选择一级类别',
	                             valueField: 'id',    
	                              textField: 'text',    
						                url: 'stockCharts/selProductCategory.json',    
						           onSelect: function(rec){					   
						            $('#categoryTwo').combobox('clear');
						            $('#categoryThree').combobox('clear');    
						            var url = 'stockCharts/selProductCategory.json?categoryOne='+rec.id;    
						            $('#categoryTwo').combobox('reload',url); }"/>
			            			             
	                二级类别: <input id="categoryTwo" class="easyui-combobox" data-options="
	                                                          missMessage:'请选择二级类别',
	                                                          valueField:'id',
	                                                          textField:'text',                                                         
	                                                          onSelect: function(rec){
	                                                             $('#categoryThree').combobox('clear');
	                                                             var categoryOne=$('#categoryOne').combobox('getValue');
	                                                             var url = 'stockCharts/selProductCategory.json?categoryOne='+categoryOne+'&categoryTwo='+rec.id;                                                             
	                                                             $('#categoryThree').combobox('reload',url);}"/>                
	                三级类别: <input id="categoryThree" class="easyui-combobox" data-options="valueField:'id',textField:'text'"/> 
	 	                                
	               
	      <a href="javascript:void(0);"class="easyui-linkbutton"data-options="iconCls:'icon-search',plain:true"
							onclick="query()">查询</a>
     </div>
            
     <!-- 基于准备好的dom，初始化echarts实例  --> 
     <div id="main" style="width: 1200px;height:500px;"></div>
     
     	<!-- 弹窗Div -->
		<div id="stockoutDetailed" style="display: none;">
		     <table id="stockoutDetailedDg" style="margin:10px" fit="true"></table>		     
		</div>
		
		<!-- 隐藏域，用于储存查询条件 -->
		<div>
		  <input type="hidden" id="oneHidden"    value=""/>
		  <input type="hidden" id="twoHidden"    value=""/>
		  <input type="hidden" id="threeHidden"  value=""/>
		  <input type="hidden" id="brandHidden"  value=""/>
		</div>
  </body>
</html>
